<template>
  <div ref="rightDrawer" class="right-drawer">
    <div ref="miniMap" class="drawer-map"></div>
    <div class="right-drawer-content">
      <div class="right-drawer-title">属性面板</div>
      <div class="right-drawer-body">
        <div class="right-drawer-body-item">
          <div class="right-drawer-body-item-title">节点名称</div>
          <div class="right-drawer-body-item-content">
            <input class="normal-input" type="text" v-model="drawerNode.nodeText" @change="changeNodeText"/>
          </div>
        </div>
        <div class="right-drawer-body-item">
          <div class="right-drawer-body-item-title">线条文本</div>
          <div class="right-drawer-body-item-content">
            <input class="normal-input" type="text" v-model="drawerEdge.edgeText" @change="changeEdgeText"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    drawerType: {
      type: String,
      default: 'grid'
    },
    selectCell: {
      type: Object | String,
      default: () => {}
    },
    graph: {
      type: Object | String,
      default: () => {}
    },
    grid: {
      type: Object
    },
  },
  data() {
    return {
      drawerNode: {
        fill: '',
        nodeText: '',
        fontSize: null,
        fontFill: '',
        strokeWidth: null,
        stroke: '',
        //其它参数
        nodeType: '',
        entityId: '',
        itemId: '',
        flowNodeType: '',
        groupIdentify: '',
        childFlowIdentify: '',
        methodName: '',
        methodParams: '',
        methodType: '',
        hasMethodParams: false,
        methodExp: '',
        flowJudges: [],
        // isJudgeNode: '0'
      },
      drawerEdge: {
        isCondition: false,
        edgeText: '',
        edgeSelect: true,
        edgeWidth: null,
        edgeColor: ''
      },
    }
  },
  watch: {
    selectCell: {
      handler(val) {
        if (val) {
          if (val.isNode()) { //节点
            this.drawerNode.fill = val.store.data.attrs.body.fill;
            this.drawerNode.nodeText = val.store.data.attrs.label.text;
            this.drawerNode.fontFill = val.store.data.attrs.label.fill;
            this.drawerNode.fontSize = Number(val.store.data.attrs.label.fontSize);
            this.drawerNode.strokeWidth = Number(val.store.data.attrs.body.strokeWidth);
            this.drawerNode.stroke = val.store.data.attrs.body.stroke;
            this.drawerNode.nodeType = val.store.data.attrs.nodeData.type;
            const flowNode = val.store.data.attrs.nodeData.flowNode;
            this.drawerNode.entityId = flowNode.entityId;
            this.drawerNode.itemId = flowNode.itemId;
            this.drawerNode.flowNodeType = flowNode.flowNodeType;
            this.drawerNode.groupIdentify = flowNode.groupIdentify;
            this.drawerNode.childFlowIdentify = flowNode.childFlowIdentify;
            this.drawerNode.methodExp = flowNode.methodExp;
            this.drawerNode.methodType = flowNode.methodType;
            this.drawerNode.flowJudges = flowNode.flowJudges;
          } else { //边
            this.drawerEdge.edgeText = val.store.data.labels ? val.store.data.labels[0].text != undefined ? val.store.data.labels[0].text : val.store.data.labels[0].attrs.label.text : '';
            console.log('his.drawerEdge.edgeText',this.drawerEdge.edgeText)
            this.drawerEdge.edgeWidth = Number(val.store.data.attrs.line.strokeWidth);
            this.drawerEdge.edgeColor = val.store.data.attrs.line.stroke;
            //处理条件连线
            let sourceNode = this.graph.getCellById(val.store.data.source.cell);
            // console.log(sourceNode, val)
            //判断源节点是否为条件节点
            // if (sourceNode.store.data.attrs.nodeData.type === 'polygon') {
            //   this.drawerEdge.isCondition = true;
            //   if (this.drawerEdge.edgeText === '') {
            //     this.drawerEdge.edgeText = this.drawerEdge.edgeSelect ? '是' : '否';
            //     //修改线条文本
            //     this.changeEdgeText();
            //   }
            //   this.drawerEdge.edgeSelect = this.drawerEdge.edgeText === '是' ? true : false;
            // } else {
            //   this.drawerEdge.isCondition = false;
            // }
          }
        }
      },
      immediate: true,
      deep: false
    },
  },
  methods: {
    // 节点设置
    changeNodeText() {
      this.selectCell.attr('label/text', this.drawerNode.nodeText);
    },
   // 边设置
   changeEdgeText() {
      // console.log(this.drawerEdge.edgeText);
      this.selectCell.setLabels(
        [{ attrs: { label: { text: this.drawerEdge.edgeText } } }]
      )
    },
  }
}
</script>
<style lang="scss" scoped>
.right-drawer{
  margin-left: 20px;
  flex: 1;
  .drawer-map{
    height: 150px;
  }
  .right-drawer-content{
    margin-top: 20px;
    .right-drawer-title{
      font-size: 16px;
      font-weight: bold;
      line-height: 30px;
      background-color: #e5f1f1;
    }
    .right-drawer-body-item-title{
      line-height: 24px;
    }
    .normal-input{
      width: 200px;
      padding: 5px 10px;
    }
  }
}
</style>